<template>
  <div id="home">
    <el-container class="container" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <el-header height="400px" style="background-color: #3d3b4f;color: #fff;text-align: center;">
        <Header />
      </el-header>
      <el-container>
        <el-container>
          <el-main style="padding:0">
            <!-- row 1 -->
            <middle-carousel />
            <!-- row 2 -->
            <div id="main-container">
              <div
                class="infsinite-list-wrapper"
                style="overflow:auto"
                v-for="con in content"
                :key="con.title"
              >
                <div
                  class="function-lable"
                  style="position:relative; margin-top: 50px; padding: 15px; height: 35px; line-height: 30px;"
                >
                  <svg
                    aria-hidden="true"
                    style="float: left; margin-right: 10px; width: 30px; height: 35px"
                  >
                    <svg id="bili-tuiguang" viewBox="0 0 1024 1024" width="100%" height="100%">
                      <path
                        d="M324.5568 660.31616v56.832c0 30.19264 24.4736 54.67136 54.67136 54.67136 30.19264 0 54.67136-24.4736 54.67136-54.67136v-14.04928l-109.34272-42.78272z m186.4704 72.96512C503.0656 799.0016 447.09376 849.92 379.22816 849.92c-73.32864 0-132.77184-59.4432-132.77184-132.77184v-87.3984l-117.15584-45.83936v0.06656a39.05024 39.05024 0 1 1-78.10048 0V411.71968a39.05024 39.05024 0 0 1 78.10048 0v0.06656l499.85024-195.59424v-23.54176a39.05024 39.05024 0 1 1 78.1056 0v610.39616a39.05024 39.05024 0 1 1-78.1056 0v-23.54176l-118.1184-46.22336z"
                        fill="#FFD778"
                      />
                      <path
                        d="M808.78592 458.73152h124.96384A39.05024 39.05024 0 0 1 972.8 497.78176v0.13312a39.05024 39.05024 0 0 1-39.05024 39.05024h-124.96384a39.05024 39.05024 0 0 1-39.05024-39.05024v-0.13312a39.05024 39.05024 0 0 1 39.05024-39.05024z m-3.31264 130.43712l108.25728 62.61248a39.05024 39.05024 0 0 1 14.2848 53.2992l-0.05632 0.1024a39.04512 39.04512 0 0 1-53.376 14.30016l-108.25728-62.6176a39.05024 39.05024 0 0 1-14.2848-53.2992l0.05632-0.09728a39.04512 39.04512 0 0 1 53.376-14.30016z m-39.14752-250.3424l108.25728-62.61248a39.04512 39.04512 0 0 1 53.376 14.30528l0.0512 0.09216a39.05024 39.05024 0 0 1-14.2848 53.30432L805.4784 406.528a39.04512 39.04512 0 0 1-53.376-14.30016l-0.0512-0.09728a39.05024 39.05024 0 0 1 14.27968-53.2992z"
                        fill="#FB813A"
                      />
                    </svg>
                  </svg>
                  <p
                    class="main-title"
                    style="float: left; margin-bottom:0; margin-top:5px"
                  >{{con.title}}</p>
                  <div style="float: right">
                    <el-button
                      type="normal"
                      size="small"
                      @click="changeButton(con.title)"
                      icon="el-icon-refresh-right"
                      round
                    >换一换</el-button>
                    <el-button
                      style="margin-left: 10px"
                      icon="el-icon-d-arrow-right"
                      type="normal"
                      size="small"
                      @click="findMore(con.title)"
                      round
                    >查看更多</el-button>
                  </div>
                </div>
                <el-row v-for="subCon in con.body" :key="subCon.title">
                  <el-col
                    :xs="12"
                    :sm="12"
                    :md="getSize()"
                    v-for="item in subCon.body"
                    :key="item.id"
                  >
                    <el-card :body-style="{ padding: '1px'}" class="col-card">
                      <div style="height: 180px" @click="gotoContent(item)">
                        <img :src="item.imgUrl" class="image" />
                      </div>
                      <div style="padding: 14px;position: inherit; top: 150px">
                        <span>{{getTitle(item.title)}}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
            <center>
            <p v-if="loading">
              <i class="el-icon-loading" style="width: 50px; text-align: center;"></i>
            </p>
            </center>
          </el-main>
        </el-container>
      </el-container>
      <Footer/>
    </el-container>
    <SideBar/>
  </div>
</template>

<script>
import Footer from "@/components/subComponents/Footer";
import SideBar from "@/components/subComponents/SideBar";
import middleCarousel from "@/components/subComponents/middleCarousel";
import Header from "@/components/subComponents/Header";

export default {
  components: {
    Footer,
    SideBar,
    middleCarousel,
    Header
  },
  data() {
    return {
      content: [],
      loading: false,
      cPage: 0,
      type: ["游戏", "媒体"],
      size: 4,
      stopflag: false
    };
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.$axios
          .get(
            this.$const.domain +
              "/v1/recommend/body?page=" +
              this.cPage +
              "&size=" +
              this.size
          )
          .then(res => {
            if (res.data.code == 200 && res.data.msg == "Success!") {
              var data = res.data.data;
              this.cPage = this.cPage + data.length;
              var recommendContent = {
                title: "推荐" + this.cPage / 2,
                body: data
              };
              this.content.push(recommendContent);
            } else {
              this.stopflag = true;
            }
          })
          .catch(error => {
            console.log(error);
            this.$message.error("网络错误，不能访问");
            this.stopflag = true;
          });
        this.loading = false;
      }, 1000);
    },
    getSize() {
      return 24 / this.content[0].body[0].body.length;
    },
    changeButton(title) {
      alert(title);
    },
    findMore(title) {
      alert(title);
    },
    gotoContent(res) {
      this.$store.commit("setResource", res);
      this.$router.push("/content/" + res.id);
    },
     getTitle(title) {
      if(title.length > 16) {
        return title.substring(0, 16) + ".."
      }
      return title
    }
  },
  mounted() {
    this.$axios
      .post(this.$const.domain + "/v1/recommend/content", {
        page: 0,
        size: this.size,
        types: this.type
      })
      .then(res => {
        if (res.data.code == 200) {
          this.content = res.data.data;
        } else {
          this.$message(res.data.msg);
        }
      })
      .catch(error => {
        console.log(error);
        this.$message.error("网络错误，不能访问");
      });
  },
  computed: {
    disabled() {
      return this.loading || this.stopflag;
    }
  }
};
</script>
<style>
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-main {
  color: #333;
  line-height: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>